<template>
    <div>
        <HomeTop></HomeTop>
        <HomeRight></HomeRight>
        <div class="pur-logo">
            <img src="https://img.alicdn.com/imgextra/i2/O1CN01bw6IxW1J9dTQPa01x_!!6000000000986-2-tps-148-56.png"></img>
            <h2>我的淘宝</h2>
        </div>
            <ShoppingCartSearch></ShoppingCartSearch>
        <MyCenterPlugin></MyCenterPlugin>
        <div class="Pur-top2">
            <div id="one" @click="ChangeSelect($event)"><span>所有订单</span></div>
            <div id="two" @click="ChangeSelect($event)"><span>待收款</span></div>
            <div id="three" @click="ChangeSelect($event)"><span>待发货</span></div>
            <div id="four" @click="ChangeSelect($event)"><span>待收货</span></div>
            <div id="five" @click="ChangeSelect($event)"><span>待评价</span></div>
            <div id="six" @click="ChangeSelect($event)"><span>分阶段</span></div>
            <div id="seven" @click="ChangeSelect($event)"><span>回收站</span></div>
        </div>
        <div id="Pur-underline" class="Pur-top2-underline"></div>
        <div class="under-top2">
            <input type="text" v-show="PurShowSearch()" placeholder="商品编号/订单号/店铺名"></input><span v-show="PurShowSearch()"><i class="iconfont icon-sousuo"></i></span>
            <button class="Pur-shaixvan" v-show="PurShowShaixvan()" @click="ChangeShaixvan()">&nbsp;&nbsp;筛选&nbsp;<i class="iconfont icon-xiala"></i></button>
            <button class="Pur-shouhui" v-show="PurShowShouhui()" @click="ChangeShaixvan()">&nbsp;&nbsp;收回&nbsp;<i class="iconfont icon-shouhui"></i></button>
            <button class="Pur-daochu">导出订单</button>
            <button class="Pur-dayin">&nbsp;打印&nbsp;</button>
            <button class="Pur-pre"><i class="iconfont icon-shangyige"></i>&nbsp;上一页&nbsp;</button>
            <button class="Pur-next">&nbsp;下一页&nbsp;<i class="iconfont icon-xiayige"></i></button>
        </div>
        <div class="shaixvankuang" v-show="sxk_show">
            <span class="sxk-time">下单时间</span>
            <div class="sxk-time-div">
                <button>近一个月</button>
                <button>近三个月</button>
                <button>近六个月</button>
                <div class="sxk-time-div-input">
                <input type="date" class="in1"  placeholder="开始时间">
                <input type="date" class="in2"  placeholder="结束时间">
                </div>
            </div>
            <span class="sxk-category">类目</span>
            <div class="sxk-category-div">
                <button>男装</button>
                <button>宠物</button>
                <button>食品生鲜</button>
            </div>
            <span class="sxk-status">交易状态</span>
            <div class="sxk-status-div">
                <button>等待买家付款</button>
                <button>付款确认中</button>
                <button>买家已付款</button>
                <button>卖家已发货</button>
                <button>交易成功</button>
                <button>交易关闭</button>
                <button>退款中的订单</button>
            </div>
            <span class="sxk-seller">卖家呢称</span>
            <input class="sxk-seller-input" type="text" placeholder="输入卖家呢称搜索"></input>
            <div class="sxk-fin-div">
                 <button class="sxk-confirm">确认</button>
                 <button>重置</button>
            </div>
           
        </div>
        <div class="pur-info">
            <span class="Pur-info-one">订单信息</span>
            <span class="Pur-info-two">商品金额</span>
            <span class="Pur-info-three">实付款</span>
            <span class="Pur-info-four">订单操作</span>
        </div>
        <div class="Pur-item-div">
            <div class="Pur-item"  v-for="value in 3">
                <div class="item-top">
                    <span class="order-time">2025-09-25</span>
                    <span class="order-num">订单号:&nbsp;2957640492552871573</span>
                    <span class="order-shopname">瑾贝生鲜企业店</span>
                    <span class="order-details">订单详情&nbsp;<i class="iconfont icon-xiayige"></i></span>
                    <span class="order-status">商家已发货</span>
                </div>
                <div class="item-bottom">
                    <img src="https://img.alicdn.com/bao/uploaded/i1/2211037445884/O1CN01nFL3zG1tKvW4UGkqg_!!2211037445884.jpg"></img>
                    <div class="Pur-div1">
                        <h2>G瑾贝十三天金凤活珠子五香/香辣10-40枚</h2>
                        <h3 class="Pur-guige">五香味10枚</h3>
                        <h3 class="Pur-ad">坏单包退 极速退款 7天无理由退货</h3>
                        <button class="Pur-refund">退款</button>
                        <button class="Pur-add-cart">加入购物车</button>
                        <div class="Pur-take">
                                <span class="Pur-take-first">待取件&nbsp;</span>
                                 <span>取件码&nbsp;19-1-7009</span>
                        </div>
                    
                    </div>
                     <div class="Pur-div2">
                        <h2 class="Pur-price">￥10.90</h2>
                        <del class="Pur-old-price">￥15.90</del>
                        <h3 class="Pur-num">x1</h3>
                        <span>退款成功</span>
                    </div>
                     <div class="Pur-div3">
                        <span class="Pur-div3-first">实付款￥10.90</span>
                        <span class="Pur-div3-second">含运费:￥0.00</span>
                        <button>手机订单</button>
                    </div>
                     <div class="Pur-div4">
                        <div class="Pur-div4-1" v-show="true"><span>还剩7天15小时自动确认</span></div>
                        <button>再来一单</button>
                        <div class="Pur-div4-2" v-show="true"><span>加入购物车</span></div>
                        <div class="Pur-div4-3" v-show="true"><span>查看物流</span></div>
                        <div class="Pur-div4-4" v-show="false"><span>追加评价</span></div>
                        <div class="Pur-div4-5" v-show="false"><span>删除订单</span></div>
                        <div class="Pur-div4-6" v-show="false"><span>申请开票</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import HomeTop from "@/components/HomeTop.vue";
    import "../style/PurchasedView.css"
import ShoppingCartSearch from "@/components/ShoppingCartSearch.vue";
import MyCenterPlugin from "@/components/MyCenterPlugin.vue";
    export default {
        name: "PurchasedView",
        data(){
            return{
                sxk_show:false,
                currentSelect:"one",
                shaixvanOrnot:true,
            }
        },
        methods:{
            ChangeSelect(event){
                
                const element=document.getElementById("Pur-underline");
                this.currentSelect=event.currentTarget.id;
                if(this.currentSelect=="one"){
                    element.style.left="21.9rem";
                }
                else if(this.currentSelect=="two"){
                    element.style.left="28.1rem";
                }
                else if(this.currentSelect=="three"){
                    element.style.left="34.1rem";
                }
                else if(this.currentSelect=="four"){
                    element.style.left="40.6rem";
                }
                else if(this.currentSelect=="five"){
                    element.style.left="46.9rem";
                }
                else if(this.currentSelect=="six"){
                    element.style.left="53.1rem";
                }
                else if(this.currentSelect=="seven"){
                    element.style.left="59.3rem";
                }
            },
            PurShowSearch(){
                 if(this.currentSelect=="one"){
                    return true;
                }
            },
            PurShowShaixvan(){
                if(this.currentSelect=="one"&&this.shaixvanOrnot==true){
                    return true;
                }
            },
             PurShowShouhui(){
                if(this.currentSelect=="one"&&this.shaixvanOrnot==false){
                    return true;
                }
            },
            ChangeShaixvan(){
                this.sxk_show=!this.sxk_show;
                this.shaixvanOrnot=!this.shaixvanOrnot;
            },
        },
    }
</script>